import React, { Component } from "react";
import { View, Text, Image, StyleSheet, ScrollView, TouchableWithoutFeedback, FlatList } from "react-native";
import CustomerHeader from "../../widget/customerHeader";
import img_arr from "../../util/img_arr";
import {width} from "../../util/apdater_util";
import ScrollableTabView, { ScrollableTabBar,DefaultTabBar} from 'react-native-scrollable-tab-view';
import  LinearGradient from 'react-native-linear-gradient';
import TopicCell from "./TopicCell";
import PropTypes from "prop-types";
import NetUtil from '../../net/net_util'
import * as RootNavigation from '../../../App';

class TopicCustomTabBar extends Component{
  constructor(props) {
    super(props);
  }
  static propTypes = {
    tabLabelNames: PropTypes.array, // tabs
    goToPage: PropTypes.func, // 跳转到对应tab的方法
    tabs: PropTypes.array,
    activeTab: PropTypes.number,
    onPress:PropTypes.func
  }

  render() {
    const containerWidth = this.props.containerWidth;
    const numberOfTabs = this.props.tabs.length;
    const translateX = this.props.scrollValue.interpolate({
      inputRange: [0, 1],
      outputRange: [0, containerWidth / numberOfTabs],
    });
    return (
      <View style={[this.props.style,styles.tabs]}>
        {this.props.tabs.map((tab,i)=>{
          return <TouchableWithoutFeedback style={styles.tabBox} key={tab} onPress={()=>this.props.goToPage(i)}>
            <View style={styles.tabBox}>
              <Text style={[styles.tab,i === this.props.activeTab?{fontSize:19,color:'#222222',fontWeight:'600'}:{}, this.props.textStyle]}>{this.props.tabLabelNames[i].label}</Text>
              {i===this.props.activeTab?<Image style={styles.lineBar}  source={require('../../img/line_bar.png')}></Image>:null}
            </View>
          </TouchableWithoutFeedback>
        })}
      </View>
    );
  }
}

export default class TopicDetail extends Component{
  constructor(props) {
    super(props);
    this.tabView=null;
    this.navBar=null;
    this.id='';
    this.state={
      backIconIsWhite:true,
      info:{},
      tabList:[{
        label:'动态',
        index:1
      },{
        label:'热门',
        index:2
      }],
      dataList:[{
        label:1,
        value:1
      },{
        label:2,
        value:2
      },{
        label:3,
        value:3
      }]
    }
  }

  componentDidMount() {
    this.id=this.props.route.params.id
    this.getDynamicDetail()
  }

  /*获取动态详情*/
  getDynamicDetail(){
    NetUtil.get('trend/topic/detail',{topicId:this.id},(res)=>{
      console.log(res)
      if(res.code==200){
        this.setState({info:res.data})
      }
    })
  }

  _renderItem=(info)=>{
    // return (
    //   <TopicCell></TopicCell>
    // )
  }
  _separator(){
    return <View style={{backgroundColor:'#F6F6F6',height:5}}></View>
  }

  _renderFooter(){
    return (
      <View style={styles.footer}>
        <TouchableWithoutFeedback onPress={this.publishTopic}>
          <LinearGradient colors={['#e79c58','#f8da85']} start={{x:0,y:1}} style={styles.joinBtn}>
            <Text style={styles.joinTitle}>参与话题</Text>
          </LinearGradient>
        </TouchableWithoutFeedback>
      </View>
    )
  }

  onChangeTab(obj){
    console.log(obj)
  }
  selectTabChange(i){
    if(this.tabView)this.tabView.goToPage(i)
  }

  publishTopic(){
    RootNavigation.navigate('PublishTopic',{})
  }

  _onScroll(event){
    let y=event.nativeEvent.contentOffset.y
    console.log(y)
    if(y<50){
      this.navBar.setNativeProps({style:{backgroundColor:'rgba(255,255,255,0)'}})
      this.setState({backIconIsWhite:true})
    }
    else{
      this.navBar.setNativeProps({style:{backgroundColor:'rgba(255,255,255,1)'}})
      this.setState({backIconIsWhite:false})
    }
  }

  render(){
    return (
      <View style={{flex:1,backgroundColor:'#fff'}}>
        <CustomerHeader ref={ref=>this.navBar=ref}
                        canBack={true}
                        style={styles.nav}
                        leftImageView={this.state.backIconIsWhite?img_arr.icon_back_white:img_arr.icon_back_black}
                        leftOnPress={()=>this.props.navigation.pop()}>
          <Image style={styles.share} source={this.state.backIconIsWhite?img_arr.icon_share_white:img_arr.icon_share_black}></Image>
        </CustomerHeader>
        <ScrollView scrollEnabled={true} onScroll={this._onScroll.bind(this)} scrollEventThrottle={10} showsVerticalScrollIndicator={false}>
          <View style={{flex:1}}>
            <Image style={styles.bg_icon} source={{uri:this.state.info.thumb}}></Image>
            <View style={styles.tagBox}>
              <View>
                <Text style={{color:'#fff',fontSize:19,fontWeight:'600'}}># {this.state.info.name}</Text>
                <Text style={{color:'#ffffff90',fontSize:12,marginTop:12}}>讨论 <Text style={{color:'#fff',fontSize:12,fontWeight:'500'}}>{this.state.info.trendNum}万</Text></Text>
                <Text style={{color:'#fff',fontSize:11,marginTop:8}}>{this.state.info.remark}</Text>
              </View>
              <View style={styles.focusBox}>
                <Text style={styles.focusTitle}>+关注</Text>
              </View>
            </View>
          </View>
          <View style={styles.info}>
            <ScrollableTabView initialPage={0} ref={(tabView) => { this.tabView = tabView; }} prerenderingsiblingsNumber={1} scrollWithoutAnimation={false} onChangeTab={this.onChangeTab} onScroll={
              (position) => {
                console.log('滑动时的位置：' + position);
              }
            } locked={false} renderTabBar={()=><TopicCustomTabBar tabLabelNames={this.state.tabList} onPress={this.selectTabChange}/>}>
              <View tabLabel='Tab4' style={{flex: 1}}>
                <View style={{flex:1 ,width:'100%'}}>
                  <FlatList
                    scrollEnabled={false}
                    data={this.state.dataList}
                    renderItem={this._renderItem}
                    ItemSeparatorComponent={this._separator}
                    keyExtractor={(item)=>item.value}>
                  </FlatList>
                </View>
              </View>
              <View tabLabel='Tab5' style={{flex: 1}}>
                <View style={{flex:1 ,width:'100%'}}>
                  <Text>界面5</Text>
                </View>
              </View>
            </ScrollableTabView>
          </View>
        </ScrollView>
        {this._renderFooter()}
      </View>
    )
  }
}
const styles=StyleSheet.create({
  nav:{
    position:'absolute',
    top:0,
    left:0,
    right:0,
    backgroundColor:'rgba(255,255,255,0)',
    zIndex:9999
  },
  share:{
    width:18,
    height:18,
    marginRight:14
  },
  bg_icon:{
    width: '100%',
    height: 180
  },
  tagBox:{
    position: 'absolute',
    top:87,
    left:20,
    width:width-40,
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center'
  },
  focusBox:{
    width:64,
    height:30,
    borderRadius:15,
    backgroundColor: '#fff',
  },
  focusTitle:{
    flex:1,
    textAlign:'center',
    lineHeight:30,
    color:'#E39354',
    fontSize:11
  },
  /**tab**/
  tabs:{
    height:40,
    backgroundColor:'#fff',
    flexDirection:'row',
    justifyContent:'flex-start',
    alignItems:'center',
    borderTopLeftRadius:8,
    borderTopRightRadius:8,
  },
  tabBox:{
    height:40,
    justifyContent: 'center',
    alignItems:'center'
  },
  tab:{
    color: '#666666',
    fontSize: 15,
    paddingLeft: 10,
    paddingRight:10
  },
  lineBar:{
    position:'absolute',
    width:20,
    height:3,
    bottom:0,
  },
  /**card*/
  info:{
    marginTop:-10,
    paddingTop:20,
    backgroundColor:'#fff',
    borderTopLeftRadius:8,
    borderTopRightRadius:8,
  },
  footer:{
    height:80,
    backgroundColor:'#fff'
  },
  joinBtn:{
    height:44,
    borderRadius: 22,
    marginHorizontal:24,
    marginTop: 10
  },
  joinTitle:{
    flex:1,
    textAlign:'center',
    lineHeight: 44,
    color:'#fff',
    fontSize:15,
    fontWeight:'500'
  }
})
